<!--
    在线预约页面

    author Yuanao
    date 2021年11月11日19:25:45
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>在线预约</title>

    <!-- css -->
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="/plugins/cubeportfolio/css/cubeportfolio.min.css">
    <link href="/css/nivo-lightbox.css" rel="stylesheet"/>
    <link href="/css/nivo-lightbox-theme/default/default.css" rel="stylesheet" type="text/css"/>
    <link href="/css/owl.carousel.css" rel="stylesheet" media="screen"/>
    <link href="/css/owl.theme.css" rel="stylesheet" media="screen"/>
    <link href="/css/animate.css" rel="stylesheet"/>
    <link href="/css/style.css" rel="stylesheet">

    <!-- boxed bg -->
    <link id="bodybg" href="/bodybg/bg1.css" rel="stylesheet" type="text/css"/>
    <!-- template skin -->
    <link id="t-colors" href="/color/default.css" rel="stylesheet">
    <!--    -->
    <script src="/js/pageWriteHtml.js" charset="UTF-8"></script>
    <style>
        #date {
            width: 100%;
            margin-bottom: 20px;
        }
    </style>
</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-custom">

<div id="wrapper">

    <!--  将头部信息写入到这里  -->
    <script>writeHtmlAsHead("在线预约");</script>


    <!-- Section: intro -->
    <section id="intro" class="intro">
        <div class="intro-content">
            <div class="container">


                <!-- Nav tabs -->
                <div style="background-color: whitesmoke;height: 400px">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link active" id="welcome-tab" data-toggle="tab" href="#welcome" role="tab"
                               aria-controls="welcome" aria-selected="true">欢迎</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="step1-tab" data-toggle="tab" href="#step1" role="tab"
                               aria-controls="step1" aria-selected="false">选择科室</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="step2-tab" data-toggle="tab" href="#step2" role="tab"
                               aria-controls="step2" aria-selected="false">选择医生</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="pay-tab" data-toggle="tab" href="#pay" role="tab"
                               aria-controls="pay" aria-selected="false">结算完成</a>
                        </li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="welcome" role="tabpanel" aria-labelledby="welcome-tab">
                            <h2 style="margin: 200px auto;text-align: center">欢迎使用22K战地医疗预约系统</h2>

                        </div>

                        <div class="tab-pane" id="step1" role="tabpanel" aria-labelledby="step1-tab">

                            <form style="margin:10px 50px">
                                <div class="row">
                                    <div class="form-group col-lg-8">
                                        <label for="selectDepartment"> 选择科室 </label>
                                        <select class="form-control" id="selectDepartment">
                                            <!--js动态添加-->
                                        </select>
                                    </div>
                                    <div id="selectDepartment_div" class="col-lg-4">
                                        <img id="selectDepartment_img" src="" alt="" height="100px" width="100px">
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="form-group col-lg-8">
                                        <label for="selectDepartment"> 选择预约日期 </label><br>
                                       <input type="date" id="date">
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="form-group col-lg-8">
                                        <label for="selectDepartment"> 选择预约时间段 </label>
                                        <select class="form-control" id="selectTimeQuantum">
                                            <!--js动态添加-->
                                        </select>
                                    </div>
                                </div>


                            </form>

                        </div>


                        <div class="tab-pane" id="step2" role="tabpanel" aria-labelledby="step2-tab">

                            <form style="margin:10px 50px">

                                <div class="row">
                                    <div class="form-group col-lg-8">
                                        <label for="selectDepartment"> 选择医生 </label>
                                        <select class="form-control" id="selectDoctor">
                                            <!--js动态添加-->
                                        </select>
                                    </div>
                                    <div id="selectDoctor_div" class="col-lg-4">
                                        <img id="selectDoctor_img" src="" alt="" height="100px" width="100px">
                                    </div>
                                </div>
                                <div style="margin: auto">
<!--                                    <p>描述病情</p>-->
                                    <label for="textarea">描述病情</label>
                                    <textarea id="textarea" rows="5" style="width: 100%"></textarea>
                                </div>
                            </form>
                        </div>


                        <div class="tab-pane" id="pay" role="tabpanel" aria-labelledby="pay-tab">

                            <div align="center">
                                <h4>订单提交,请支付</h4>
                                <div>
                                    <img height="200px" width="200px" src="https://qr.api.cli.im/newqr/create?data=%25E8%25AF%25B7%25E6%2594%25AF%25E4%25BB%2598%25E8%25B4%25B9%25E7%2594%25A8100%25E5%2585%2583&level=H&transparent=false&bgcolor=%23FFFFFF&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&logoshape=no&size=260&kid=cliim&key=429d74a4ca2e34ab25297388657c5039" alt="">
                                </div>
                                <p align="center">100元</p><button id="simulationCapture">模拟缴费</button>

                                <button id="bookSuccess" class="btn btn-primary">完成</button>
                            </div>

                        </div>
                    </div>

                </div>
                <div>
                    <button id="next"  class="btn btn-primary">下一步</button>
                </div>

            </div>
        </div>
    </section>

    <!-- /Section: intro -->


    <!--  将头部信息写入到这里  -->
    <script>writeHtmlAsFooter();</script>


</div>
<a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>

<!-- Core JavaScript Files -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.easing.min.js"></script>
<script src="/js/wow.min.js"></script>
<script src="/js/jquery.scrollTo.js"></script>
<script src="/js/jquery.appear.js"></script>
<script src="/js/stellar.js"></script>
<script src="/plugins/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/nivo-lightbox.min.js"></script>
<script src="/js/custom.js"></script>
<script src="/contactform/contactform.js"></script>

<!--本页面的js代码-->
<script>

    /**
     * 对Date的扩展，将 Date 转化为指定格式的String
     * 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
     * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
     * 例子：
     *      (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
     *      (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
     *
     * @param fmt
     * @returns {*}
     */
    Date.prototype.format = function(fmt){
        var o = {
            "M+": this.getMonth()+1,
            "d+": this.getDate(),
            "H+": this.getHours(),
            "m+": this.getMinutes(),
            "s+": this.getSeconds(),
            "S+": this.getMilliseconds()
        };

        //因位date.getFullYear()出来的结果是number类型的,所以为了让结果变成字符串型，下面有两种方法：


        if(/(y+)/.test(fmt)){
            //第一种：利用字符串连接符“+”给date.getFullYear()+""，加一个空字符串便可以将number类型转换成字符串。

            fmt=fmt.replace(RegExp.$1,(this.getFullYear()+"").substr(4-RegExp.$1.length));
        }
        for(var k in o){
            if (new RegExp("(" + k +")").test(fmt)){

                //第二种：使用String()类型进行强制数据类型转换String(date.getFullYear())，这种更容易理解。

                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(String(o[k]).length)));
            }
        }
        return fmt;
    }


    /*************** 校验登录信息 *****************/
    let userJsonStr = localStorage.getItem("user");
    if (userJsonStr == undefined || userJsonStr == null || userJsonStr == "") {
        //没有登录,跳转登录页面
        document.location = "/page/login.html?url=" + encodeURIComponent(location.href);
    }

    var user = JSON.parse(userJsonStr); //获取user登录对象

    /********存储一些状态信息**********/
    var currentStep = 1; //当前正在处理哪一步
    var isSubmit = false;  //是否已经提交,在第三步点击提交的时候切换此状态,提交以后前三个页面不可访问
    var bookId = -1;  //预约表的订单

    var allDepartment = null;
    var allTimeQuantum = null;
    var allDoctor = null;   //保存获取到的所有的医生

    //获取一些默认选择
    var dateSelect = "";
    var departmentSelect = -1;
    var timeQuantumSelect = -1;
    var doctorSelect = -1;
    var message = "";   //用户的留言信息

    /*获取一些标签*/
    var $welcomeTab = $("#welcome-tab");
    var $step1Tab = $("#step1-tab");
    var $step2Tab = $("#step2-tab");
    var $payTab = $("#pay-tab");

    var $next = $("#next");
    var $previous = $("#previous");

    /*初始化数组*/
    var titleArr = [$welcomeTab, $step1Tab, $step2Tab, $payTab];


    /****************初始化页面数据********************/

    /*
    * 初始化日期选择
    * */
    {
        dateSelect = new Date().format("yyyy-MM-dd");
        $("#date").val(dateSelect);
    }

    /*
    请求所有科室
    */
    $.post("http://localhost:8080/api/department/getAllDepartment", (data) => {
        allDepartment = data;   //将所有的可是存到变量里

        console.log(allDepartment)

        let $selectDepartment = $("#selectDepartment");
        $selectDepartment.html(""); //清空


        for (let i = 0; i < data.length; i++) {
            let obj = data[i];
            let elem = $("<option value='" + obj.id + "'>" + obj.departmentName + "</option>");
            $selectDepartment.append(elem);
        }
        //当科室有数据的时候默认选择的是第一个数据
        if (data.length > 0) {
            departmentSelect = data[0].id;
            $("#selectDepartment_img").attr("src",data[0].img)    //设置默认的照片
        }

        getDoctor(departmentSelect, timeQuantumSelect); //获取医生信息
    });

    /*
    获取时间段
    */
    $.post("http://localhost:8080/api/book/getTimeQuantums", (data) => {

        if (data.code === 0) {
            allTimeQuantum = data.data;   //将所有的可是存到变量里

            let $selectTimeQuantum = $("#selectTimeQuantum");
            $selectTimeQuantum.html(""); //清空

            //当时间段有数据的时候默认选择的是第一个数据
            if (data.data.length > 0) {
                timeQuantumSelect = data.data[0].id;
            }

            for (let i = 0; i < data.data.length; i++) {
                let obj = data.data[i];
                let elem = $("<option value='" + obj.id + "'>" + obj.timeQuantumName + "</option>");
                $selectTimeQuantum.append(elem);
            }
            getDoctor(departmentSelect, timeQuantumSelect); //获取医生信息
        }

    });


    /**
     * 获取医生信息
     * @param departmentId 科室id
     * @param timeQuantumId 时间段id
     */
    function getDoctor(departmentId, timeQuantumId) {

        console.log(doctorSelect + "  " + timeQuantumId)
        //有值等于0 表示前两个没有初始化
        if (departmentId == -1 || timeQuantumId == -1) {
            console.log("退出了");
            return;
        }

        $.post("http://localhost:8080/doctor/getDoctorByDepartmentIdAndTimeQuantumId", {
            timeQuantumId: timeQuantumId,
            departmentId: departmentId,
            date:dateSelect
        }, (data) => {

            if (data.code === 0) {
                allDoctor = data.data;  //本次请求的数据

                let $selectDoctor = $("#selectDoctor");
                $selectDoctor.html(""); //清空

                //当时间段有数据的时候默认选择的是第一个数据
                if (data.data.length > 0) {
                    doctorSelect = data.data[0].id; //获取第一个id值
                    $("#selectDoctor_img").attr("src",data.data[0].img);
                } else {
                    let elem = $("<option value='0'>当前科室时间段无可预约医生,请更换时间段</option>");
                    $selectDoctor.append(elem);
                }

                for (let i = 0; i < data.data.length; i++) {
                    let obj = data.data[i];
                    let elem = $("<option value='" + obj.id + "'>" + obj.name + "</option>");
                    $selectDoctor.append(elem);
                }
            }
        })

    }


    /*************下面写一些事件***************/

    /**
     * 科室选择框的改变事件
     * */
    $("#selectDepartment").change(function (obj) {
        console.log(obj.currentTarget)
        let selected = $("#selectDepartment").val();    //获取到当前选中value值

        departmentSelect = selected;    //当前选中

        for (let i = 0; i < allDepartment.length; i++) {
            if (allDepartment[i].id == selected) {
                $("#selectDepartment_img").attr("src", allDepartment[i].img);
            }
        }
        getDoctor(departmentSelect, timeQuantumSelect); //获取医生信息
    })


    /**
     * 预约时间段选择框的改变事件
     * */
    $("#selectTimeQuantum").change(function (obj) {
        console.log(obj.currentTarget)
        //获取当前时间段选择器选中的value值
        let selected = $("#selectTimeQuantum").val();

        timeQuantumSelect = selected;   //改变当前已经选择的时间段id

        //获取医生信息,并刷新医生的下拉框
        getDoctor(departmentSelect, timeQuantumSelect);
    })

    /**
     * 医生选择框的改变事件
     * */
    $("#selectDoctor").change(function (obj) {
        //获取到当前选中value值
        let selected = $("#selectDoctor").val();

        //改变当前已选择医生的值
        doctorSelect = selected;

        //遍历列表,查找对应的医生信息
        for (let i = 0; i < allDepartment.length; i++) {
            if (allDoctor[i].id == selected) {
                //修改图片为找到的人的图片
                $("#selectDoctor_img").attr("src", allDoctor[i].img);
                break;//跳出循环,避免性能浪费
            }
        }
    })

    /**
     * 医生选择框的改变事件
     * */
    $("#textarea").change(function (obj) {
        //改变当前已选择医生的值
        message = $("#textarea").val();
    })



    /******小标题的点击事件*******/
    //欢迎小页面的点击事件
    $welcomeTab.on("click",function (event) {
        if (isSubmit) {
            $payTab.click();
            alert("订单已完成,请支付");
            return false;
        }
        currentStep = 1;
        $next.html("下一步");
        return true;
    })
    //第二页选择科室页的点击事件
    $step1Tab.on("click",function (event) {
        if (isSubmit) {
            $payTab.click();
            alert("订单已完成,请支付");
            return false;
        }
        currentStep = 2;
        $next.html("下一步");
        return true;
    })
    //第三步选择医生的点击事件
    $step2Tab.on("click",function (event) {
        if (isSubmit) {
            $payTab.click();
            alert("订单已完成,请支付");
            return false;
        }
        currentStep = 3;
        return true;
    })
    //支付页面的点击事件
    $payTab.on("click",function (event) {
        if (!isSubmit) {
            //没有提交的时候不允许点击过来
            return false;
        }
        currentStep = 4;
        return true;
    })



    /**
     * 下一步按钮的点击事件
     */
    $next.on('click', function (event) {
        event.preventDefault()
        // $(this).tab('settings');
        console.log(currentStep);
        switch (currentStep) {
            case 1: {
                $step1Tab.click();  //点击第二页
                break;
            }
            case 2:
                if (departmentSelect == -1 || timeQuantumSelect == -1) {
                    alert("选选择科室或时间");
                    break;
                }
                $step2Tab.click(); //点击第三页
                $next.html("提交");
                break;
            case 3:
                if (doctorSelect == -1 || message == "") {
                    alert("选选择医生并填写症状信息");
                    break;
                }
                /* 请求订单 */
                $.ajax({
                    method:"post",
                    url:"http://localhost:8080/api/book/submitBook",
                    async:false,
                    data:{
                        userId:user.id,
                        doctorUserId:doctorSelect,
                        timeQuantumId:timeQuantumSelect,
                        message:message,
                        cost:100,
                        bookStatusId:1,
                        date:dateSelect
                    },
                    success:data => {
                        if (data.code === 0) {
                            bookId =  data.data.id; //保存下来预约订单的id号

                            isSubmit = true; //已经提交,不可以点击到前面页面
                            $payTab.click(); //点击最后一页
                            $next.attr("disabled","disabled");

                        } else {
                            alert("提交订单失败,请重试")
                        }
                    },
                    error:() =>{
                        alert("提交订单失败,请重试")
                    }
                })
                break;
        }

    })

    /*时间选择框的改变事件*/
    $("#date").on("change",function (event) {
        console.log(event)
        dateSelect = event.currentTarget.value;

        if (dateSelect != "") {
            let selectDate = new Date(dateSelect + "");
            let nowDate = new Date(new Date().format("yyyy-MM-dd"));

            if (selectDate < nowDate) {
                alert("别闹,你又不会穿越");
                dateSelect = new Date().format("yyyy-MM-dd");
                $("#date").val(dateSelect)   //设置日期为当天
            }
        } else {
            //时间为空,设置成默认今天
            dateSelect = new Date().format("yyyy-MM-dd");
            $("#date").val(dateSelect)   //设置日期为当天
        }

        getDoctor(departmentSelect, timeQuantumSelect); //获取医生信息
    })


    /*
        模拟缴费的点击事件
     */
    $("#simulationCapture").on("click",function (event) {
        $.post("http://localhost:8080/api/book/modifyBook",{
            id:bookId,
            bookStatusId:2
        },(data,status)=> {
            console.log(data)
            if (status === "success" && data.code === 0) {
                alert("缴费成功");
                ///TODO 缴费成功跳转预约详情
                document.location = "/page/user/bookManage.html";
            } else {
                alert("缴费失败");
            }
        })
    })

     /*
        完成按钮的点击事件,没有缴费直接点击完成会导致此订单为缴费
     */
    $("#bookSuccess").on("click", function (event) {

        ///TODO 缴费成功跳转预约详情
        document.location = "/page/user/bookManage.html";

    })




</script>
</body>

</html>
